<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="videoFrame">
<video src="./videos/chrome.webm" type="video/webm" loop id="myVideo"></video>

 <button id="playBtn">播放</button>
 <button id="fullscreen">全屏</button>

</div>
</body>
<script>

    let video=document.getElementById('myVideo')
    let playBtn=document.getElementById('playBtn')
    let videoFrame=document.getElementById("videoFrame")
    let fullscreenBtn=document.getElementById("fullscreen")
    //全屏
    fullscreenBtn.addEventListener("click",()=>{
        videoFrame.requestFullscreen()
    })


    //播放暂停
    playBtn.addEventListener('click',()=>{
       if(video.paused){
           video.play()
           playBtn.innerText="暂停"
       }else{
           video.pause()
           playBtn.innerText="播放"
       }
    })

 //屏蔽右键，阻止默认行为
   video.addEventListener("contextmenu",(e)=>e.preventDefault())



</script>
</html>